<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
	<meta charset="utf-8">
	<title>Login</title>
	<style type="text/css">
		* {
			font-size: 14px;
			margin: 0;
			padding: 0;
		}
		div {
			width: 1000px;
			margin: 10px auto 0;
		}
		table {
			width: 100%;
		}

		.tableList {
			border: solid 1px;
			border-collapse: collapse;
		}
		.tableList th, .tableList td {
			border: solid 1px gray;
			padding: 5px;
			text-align: center;
		}
		h4 {
			margin-bottom: 5px;
		}
		p {
			padding: 5px;
			margin-bottom: 5px;
			margin-left: 5px;
		}

		input {
			padding: 3px;

		}
	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script type="text/javascript">

		$(function(){


		})
		// $(function(){
		//     initTable();//初始化表格
		//     //==================查询用户==================
		//     $('#btnQuery').click(function () {
		//         //访问controller获取数据并接收到result
		//         $.post("ajax/userListByName", {txtQuery: $('#search').val()}, function (result) {
		//             //判断访问是否成功
		//             if(result.status == 1){
		//                 //数据加载到Table
		//                 loadTable(result);
		//             }else{
		//                 alert("无法获取数据， 请与管理员联系！");
		//             }
		//         })
		//     })
		//
		//     //==================新增用户==================
		//     $('#btnAdd').click(function(){
		//         //匹配Controller中的toAdd Mapping
		//         $('#frm').attr("action", "toAdd")
		//         //提交表单
		//         $('#frm').submit()
		//     });
		// });
		//
		// //==================删除用户==================
		// function delUser(id, name){
		//     //弹出确认窗口
		//     let message = "此操作将删除用户：" + name;
		//     message += "\n单击确认， 将执行删除。单击取消， 则撤销删除。";
		//
		//     if(confirm(message)){
		//         //执行删除操作
		//         let i = id;
		//         let frm = document.getElementById('frm');
		//         frm.action = "ajax/doDelete?id=" + i;
		//         frm.submit();
		//     }
		// }
		//
		//
		//
		// //==================加载Table数据==================
		// function loadTable(resultSet) {
		//     //找出Table中除了第一行以外的所有tr并清空
		//     $('.tableList tr:not(:first)').empty();
		//
		//     let $table = $('.tableList');
		//     $.each(resultSet.userList, function(index, user){
		//         let $trs = $(
		//             '<tr>' +
		//             '<td>' + user.account + '</td>' +
		//             '<td>' + user.name + '</td>' +
		//             '<td>' + user.job + '</td>' +
		//             '<td>' + user.deptId + '</td>' +
		//             '<td><a href="/toUpdate?id=' + user.id + '">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: delUser(' + user.id + ',\''  + user.name + '\')">删除</a></td>' +
		//             '</tr>'
		//         );
		//         $table.append($trs);
		//     });
		// }
		//
		// //==================自定义Table==================
		// function initTable(){
		//     $.post("ajax/userList", function (result) {
		//         if(result.status == 1){
		//             loadTable(result);
		//         }else{
		//             alert("无法获取数据， 请与管理员联系！");
		//         }
		//     })
		// }
	</script>
</head>
<body>
<div>
	<h4>系统用户查询</h4>
	<form id="frm">
		<p>
			<label>
				<input id="search" type="search" placeholder="请输入用户名">
			</label>
			<input type="button" id="btnQuery" value="查询用户" >
			<input type="button" value="增加用户" id="btnAdd">
		</p>

		<hr>
		<h4>系统用户列表</h4>
		<table class="tableList">
			<tr>
				<th>用户名</th>
				<th>姓名</th>
				<th>用户类型</th>
				<th>是否在排班</th>
				<th>操作</th>
			</tr>
			<tr th:each="user: ${userList}">
				<td th:text="${user.userName}"></td>
				<td th:text="${user.realName}"></td>
				<td th:text="${user.useType}"></td>
				<td th:text="${user.isScheduling}"></td>
				<td>
					<a href="">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="">删除</a>
				</td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>